<template>
	<view class="uploadMerchantInfo">
		<u-navbar
			title="结算信息" 
			left-text="" 
			@leftClick="onClickBack"
			:placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true"
		></u-navbar>
		<view class="content">
			<view class="w-flex w-flex-between">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead($event,1)"
					@delete="deletePic($event,1)"
					name="1"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/bankcard_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
				</u-upload>
				<u-upload
					v-if="accountInfo.legalFlag === 0"
					:fileList="fileList2"
					@afterRead="afterRead($event,2)"
					@delete="deletePic($event,2)"
					name="2"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/authorization_example.jpg" 
					mode="widthFix" style="width: 160px;max-height: 120px;min-height: 120px;"></image>
				</u-upload>
			</view>
			<view class="w-flex w-flex-between">
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">上传银行卡正面</text>
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;" v-if="accountInfo.legalFlag === 0">非法人结算授权书图片</text>
			</view>
			<view class="w-flex w-flex-between">
				<u-upload
					v-if="accountInfo.legalFlag === 0"
					:fileList="fileList3"
					@afterRead="afterRead($event,3)"
					@delete="deletePic($event,3)"
					name="3"
					multiple
					:maxCount="1"
					width="160"
					height="120">
					<image src="../../static/icon/positive_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
				</u-upload>
				<u-upload
					v-if="accountInfo.legalFlag === 0"
					:fileList="fileList4"
					@afterRead="afterRead($event,4)"
					@delete="deletePic($event,4)"
					name="4"
					multiple
					:maxCount="1"
					width="160"
					height="130">
					<image src="../../static/icon/back_e.jpg" 
					mode="widthFix" style="width: 160px;min-height: 120px;max-height: 120px;"></image>
				</u-upload>
			</view>
			<view class="w-flex w-flex-between" v-if="accountInfo.legalFlag === 0">
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">非法人身份证正面</text>
				<text class="w-txt-999 w-m-10" style="display: flex;width: 160px;justify-content: center;">非法人身份证背面</text>
			</view>
			<view>
				<u-picker :show="IndustryType.show" @cancel="close" @close="close"
					:closeOnClickOverlay="true" @confirm="confirmIndustryType"
					:columns="IndustryType.list" :keyName="keyName">
				</u-picker>

				<u--form
					labelPosition="left"
					:model="accountInfo"
					ref="form1" >
					<u-form-item
						label="账户类型"
						prop="phone"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class="w-flex w-flex-between" style="flex: 1;" @click="accountInfoTypeList.show = true">
							<text>{{accountInfo.type}}</text>
							<u-icon name="arrow-down" size="12" color="#999"></u-icon>
						</view>
					</u-form-item>
					<u-form-item
						label="结算标志"
						prop="phone"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<u-radio-group
						    v-model="accountInfo.legalFlag"
						    placement="row"
						  >
						    <u-radio
						      v-for="(item, index) in legalFlagList"
						      :key="index"
						      :label="item.name"
						      :name="item.id"
							  class="w-mr-15"
							  v-if="item.show"
						    >
						    </u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item
						label="开户行省"
						prop="phone"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class=" w-flex" @click="showIndustryType(1)" style="flex: 1;justify-content: space-between;">
							<view class="w-flex">
								<view v-if="accountInfo.branchCode1">{{accountInfo.branchCode1}}</view>
								<view v-else class="w-txt-999">请选择开户行省</view>
							</view>
							<view><u-icon name="arrow-right" size="14" color="#d9d9d9"></u-icon></view>
						</view>
					</u-form-item>
					<u-form-item
						label="开户行市"
						prop="phone"
						borderBottom
						labelWidth="70"
						clearable
						v-if="accountInfo.branchCode1"
						ref="item1">
						<view class=" w-flex" @click="showIndustryType(2)" style="flex: 1;justify-content: space-between;">
							<view class="w-flex">
								<view v-if="accountInfo.branchCode2">{{accountInfo.branchCode2}}</view>
								<view v-else class="w-txt-999">请选择开户行市</view>
							</view>
							<view><u-icon name="arrow-right" size="14" color="#d9d9d9"></u-icon></view>
						</view>
					</u-form-item>

					<u-form-item
						label="开户支行"
						prop="holder"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class=" w-flex" style="flex: 1;justify-content: space-between;">
							<u--input
								placeholder="请输入开户支行, 点击匹配进行"
								border="none"
								v-model="accountInfo.branchName"
								clearable
								>
							</u--input>
							<text @click="searchBank" class="main-color w-ml-10">搜索支行</text>
						</view>
					</u-form-item>
					<u-form-item
						label="开户名"
						prop="holder"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class=" w-flex" style="flex: 1;justify-content: space-between;">
							<u--input
								placeholder="法人结算：与法人姓名一致；企业账户：与营业执照注册名称一致"
								border="none"
								v-model="accountInfo.holder"
								clearable
							></u--input>
						</view>
					</u-form-item>
					
					<u-form-item
						label="结算人证件"
						prop="idCardNo"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class=" w-flex" style="flex: 1;justify-content: space-between;">
							<u--input
								placeholder="请输入身份证号"
								border="none"
								v-model="accountInfo.idCardNo"
								clearable
							></u--input>
						</view>
					</u-form-item>
					<u-form-item
						label="银行卡号"
						prop="bankCardNo"
						borderBottom
						labelWidth="70"
						clearable
						ref="item1">
						<view class=" w-flex" style="flex: 1;justify-content: space-between;">
							<u--input
								placeholder="请输入银行卡号"
								border="none"
								type="number"
								v-model="accountInfo.bankCardNo"
								clearable
							></u--input>
						</view>
					</u-form-item>
				</u--form>
				
			</view>
		</view>
		<view class="btnBox">
			<u-button text="保存" color="#fff" class="preservationBtn" @click="preservationChange"></u-button>
		</view>
		<u-action-sheet :actions="accountInfoTypeList.list" :show="accountInfoTypeList.show"
		:closeOnClickOverlay="true"
		:showMessageCard="true"
		:cancel-btn="true"
		:mask-close-able="true"
		@close="close"
		cancelText="取消"
		@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
export default {
	data () {
		return {
			fileList1: [],
			fileList2: [],
			fileList3: [],
			fileList4: [],
			accountInfo: {
				type: '个人账户',
				legalFlag: 0,
				branchName: '',
				branchCode: '',
				holder: '',
				idCardNo: '',
				bankCardNo: '',
				nonLegSettleAuthPic: '',
				nonLegIdcardFrontPic: '',
				nonLegIdcardBackPic: '',
				parentAreaCode: '',
				parentCityCode: ''
			},
			accountInfoTypeList: {
				list: [
					{
						name:'个人账户',
						color:'#000'
					},
					{
						name:'公司账户',
						color:'#000'
					},
				],
				show: false,
			},
			legalFlagList: [
				{
					id: 0,
					name: '非法人结算',
					show: true
			    },
				{
					id: 1,
					name: '法人结算',
					show: true
				},
			],
			showTime: false,
			showEndTime: false,
			startTime: Number(new Date()),
			endTime: Number(new Date()),
			showCurrEndTime: '结束时间',
			showCurrStartTime: '开始时间',
			IndustryType: {
				show: false,
				list: [
					[]
				]
			},
			parameterType: 1,
			keyName: 'branchName'
		}
	},
	onShow() {
		
		
	},

	async onLoad(e) {
		this.userId = e.id
		
		if (uni.getStorageSync("accountInfo")) {
			this.accountInfo.type = uni.getStorageSync("accountInfo").type === 1?'个人账户':'公司账户'
			this.accountInfo.legalFlag = uni.getStorageSync("accountInfo").legalFlag

			this.accountInfo.branchCode = uni.getStorageSync("accountInfo").unionpay
			this.accountInfo.holder = uni.getStorageSync("accountInfo").holder
			this.accountInfo.idCardNo = uni.getStorageSync("accountInfo").idCardNo
			this.accountInfo.bankCardNo = uni.getStorageSync("accountInfo").bankCardNo
			this.accountInfo.bankCardFrontPic = uni.getStorageSync("accountInfo").bankCardFrontPic
			this.accountInfo.nonLegSettleAuthPic = uni.getStorageSync("accountInfo").nonLegSettleAuthPic
			this.accountInfo.nonLegIdcardFrontPic = uni.getStorageSync("accountInfo").nonLegIdcardFrontPic
			this.accountInfo.nonLegIdcardBackPic = uni.getStorageSync("accountInfo").nonLegIdcardBackPic
			this.fileList1 = [{url: uni.getStorageSync("accountInfo").bankCardFrontPic}]
			this.fileList2 = [{url: uni.getStorageSync("accountInfo").nonLegSettleAuthPic}]
			this.fileList3 = [{url: uni.getStorageSync("accountInfo").nonLegIdcardFrontPic}]
			this.fileList4 = [{url: uni.getStorageSync("accountInfo").nonLegIdcardBackPic}]
			this.getBankCard()
			
		}
		if (uni.getStorageSync("baseInfo")) {
			if (uni.getStorageSync("baseInfo").merchantType <= 1) {
				this.accountInfo.legalFlag = 1
				this.legalFlagList[0].show = false
			}
			
		}
		
	},
	methods: {
		onClickBack () {
			uni.navigateBack()
		},
		async getBankCard () {
			let params = {
				"param[unionpayCode]": this.accountInfo.branchCode
			}
			const res = await this.$API({url: '/api/user/bankbranch2', method:"GET", data: params,})
			if(res.code === 1) {
				this.accountInfo.branchName = res.data.data.list[0].branchName
				this.accountInfo.branchCode = res.data.data.list[0].unionpayCode
				this.accountInfo.branchCode1 = res.data.data.list[0].bankArea
				this.accountInfo.branchCode2 = res.data.data.list[0].bankCity
				this.accountInfo.parentAreaCode = res.data.data.list[0].cftAreaCode
				this.accountInfo.parentCityCode = res.data.data.list[0].cftCityCode
			}
		},
		
		async searchBank () {
			
			let params = {
				"param[branchName]": this.accountInfo.branchName,
				"param[cftAreaCode]": this.accountInfo.parentAreaCode,
				"param[cftCityCode]": this.accountInfo.parentCityCode,
			}
			const res = await this.$API({url: '/api/user/bankbranch2', method:"GET", data: params,})
			if(res.code === 1) {
				this.keyName = 'branchName'
				this.IndustryType.show = true
				this.parameterType = 3
				this.IndustryType.list = [
					[]
				]
				for (let item of res.data.data.list) {
					this.IndustryType.list[0].push(item)
				}
			}
		},
		
		deletePic(event,type) {
			
			this[`fileList${event.name}`].splice(event.index, 1)
			if (type === 1) {
				this.accountInfo.bankCardFrontPic = ''
			}
			if (type === 2) {
				this.accountInfo.nonLegSettleAuthPic = ''
			}
			if (type === 3) {
				this.accountInfo.nonLegIdcardFrontPic = ''
			}
			if (type === 4) {
				this.accountInfo.nonLegIdcardBackPic = ''
			}
		},
		selectClick (index) {
			this.accountInfo.type = index.name
		},
		close () {
			this.accountInfoTypeList.show = false
			this.IndustryType.show = false
		},
		async afterRead(event, type) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].thumb, type)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		
		async uploadFilePromise(url, type) {
			return new Promise((resolve, reject) => {
				
				let a = uni.uploadFile({
					url: 'https://ynf.xxhf.cn/index.php/api/user/upload_to_les', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						file:this.fileList+type+[0]
					},
					success: (res) => {
						if (type === 1) {
							this.accountInfo.bankCardFrontPic = JSON.parse(res.data).data.fullurl
						}
						if (type === 2) {
							this.accountInfo.nonLegSettleAuthPic = JSON.parse(res.data).data.fullurl
						}
						if (type === 3) {
							this.accountInfo.nonLegIdcardFrontPic = JSON.parse(res.data).data.fullurl
						}
						if (type === 4) {
							this.accountInfo.nonLegIdcardBackPic = JSON.parse(res.data).data.fullurl
						}
						
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		checkboxChange (list) {
			console.log(list)
		},
		
		showIndustryType (type) {
			this.parameterType = type
			this.IndustryType.show = true
			this.getMccCode()
		},
		async getMccCode () {
			this.IndustryType.list = [
				[]
			]
			if(this.parameterType === 1) {
				let params = {}
				const res = await this.$API({url: '/api/user/leshua_area', method:"GET", data: params})
				this.keyName = 'areaName'
				for (let item of res.data.data) {
					this.IndustryType.list[0].push(item)
				}
			}
			if(this.parameterType === 2) {
				let params = {
					'param[parentAreaCode]': this.accountInfo.parentAreaCode
				}
				const res = await this.$API({url: '/api/user/leshua_area', method:"GET", data: params})
				this.keyName = 'areaName'
				for (let item of res.data.data) {
					this.IndustryType.list[0].push(item)
				}
			}
			
		},
		confirmIndustryType (e) {
			if (this.parameterType === 1) {
				if (this.accountInfo.branchCode1 !== e.value[0].areaName) {
					this.accountInfo.branchCode2 = ''
					this.accountInfo.parentCityCode = ''
				}
				this.accountInfo.branchCode1 = e.value[0].areaName
				this.accountInfo.parentAreaCode = e.value[0].areaCode
			}
			if (this.parameterType === 2) {
				if (e.value[0]) {
					this.accountInfo.branchCode2 = e.value[0].areaName
					this.accountInfo.parentCityCode = e.value[0].areaCode
				} else {
					this.accountInfo.branchCode2 = e.values[0][0].areaName
					this.accountInfo.parentCityCode = e.values[0][0].areaCode
				}
			}
			if (this.parameterType === 3) {
				if (e.value[0]) {
					this.accountInfo.branchName = e.value[0].branchName
					this.accountInfo.branchCode = e.value[0].unionpayCode
				} else {
					this.accountInfo.branchName = e.values[0][0].branchName
					this.accountInfo.branchCode = e.values[0][0].unionpayCode
				}
			}
			
			this.IndustryType.show = false
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.formatTimer(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.formatTimer(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		formatTimer(time, type) {
			var time = new Date(time);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			if (type === 'YMD') {
				return y+'年'+this.add0(m)+'月'+this.add0(d)+'日';
			}
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		preservationChange () {
			if(this.accountInfo.bankCardFrontPic === '') {
				uni.showToast({
					icon: 'none',
					title: '请上传银行卡正面'
				})
				return
			}
			if (this.accountInfo.legalFlag === 0) {
				if(this.accountInfo.nonLegSettleAuthPic === '') {
					uni.showToast({
						icon: 'none',
						title: '请上传非法人结算授权书图片'
					})
					return
				}
				if(this.accountInfo.nonLegIdcardFrontPic === '') {
					uni.showToast({
						icon: 'none',
						title: '请上传非法人身份证正面'
					})
					return
				}
				if(this.accountInfo.nonLegIdcardBackPic === '') {
					uni.showToast({
						icon: 'none',
						title: '请上传非法人身份证反面'
					})
					return
				}
			}
			
			if(this.accountInfo.branchCode === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入开户行'
				})
				return
			}
			if(this.accountInfo.holder === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入开户名，法人结算：与法人姓名一致；企业账户：与营业执照注册名称一致'
				})
				return
			}
			if(this.accountInfo.idCardNo === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入结算人证件号'
				})
				return
			}
			if(this.accountInfo.bankCardNo === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入银行卡号'
				})
				return
			}
			console.log(this.accountInfo.legalFlag)
			if(this.accountInfo.legalFlag === 1) {
				this.accountInfo.nonLegSettleAuthPic = ''
				this.accountInfo.nonLegIdcardFrontPic = ''
				this.accountInfo.nonLegIdcardBackPic = ''
			}
			let accountInfo = {
				type: this.accountInfo.type === '个人账户'?1:2,
				legalFlag: this.accountInfo.legalFlag,
				unionpay: this.accountInfo.branchCode,
				holder: this.accountInfo.holder,
				idCardNo: this.accountInfo.idCardNo,
				bankCardNo: this.accountInfo.bankCardNo,
				bankCardFrontPic: this.accountInfo.bankCardFrontPic,
				nonLegSettleAuthPic: this.accountInfo.nonLegSettleAuthPic,
				nonLegIdcardFrontPic: this.accountInfo.nonLegIdcardFrontPic,
				nonLegIdcardBackPic: this.accountInfo.nonLegIdcardBackPic,
			}
			
			uni.setStorageSync("accountInfo", accountInfo)
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.uploadMerchantInfo {
	.content {
		padding: 0 20rpx;
		padding-top: 20rpx;
		background: #FFFFFF;
		.labelWidth {
			width: 140rpx;
		}
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 240rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.btnBox {
		margin-top: 40rpx;
		padding: 20rpx;
		.preservationBtn {
			background-color: #1678ff !important;
		}
	}
}
/deep/.u-picker__view__column__item {
	line-height: initial !important;
}
</style>
